<template>
    <div id="background">
        <el-container>
            <el-header id="xiangQingHead" style="position:fixed;top:20px;width:100%;z-index:2">
                <!-- <div style="height:100%;width:100%;position:relative;">
                    <el-image :src="zhengShuImg" class="zhengShuImg" fit="cover"></el-image>
                <el-col :xs="3" :sm="3" :md="3" class="backCol"> 
                    <img v-bind:src="backIcon" class="backSize" @click="back" />
                </el-col>
                </div> -->
                <el-row type="flex" style="height:74%;display:flex;align-items: flex-end">
                    <el-col :xs="2" :sm="2" :md="2" :offset="1" class="imgCol">
                        <img v-bind:src="backIcon" class="backSize" @click="back" />
                    </el-col>
                </el-row>
            </el-header>
            <div style="height:190px;">
                <el-image :src="zhengShuImg" class="zhengShuImg" fit="cover"></el-image>
            </div>
            <el-main id="xiangQingMain">
                <el-row class="jieShaoRow" style="padding-left:15px;padding-right:15px;padding-top:15px;">
                    <el-row class="zhengShuJieShao">
                        <el-col style="width:10%;height:21px;">
                        <div class="point"></div>
                        </el-col>
                        <el-col style="width:90%;">证书介绍</el-col>
                    </el-row>
                    <div class="jieShaoWengBen">{{zhengShuJs}}</div>
                </el-row>
                <el-row class="baoMingRow" style="padding-left:15px;padding-right:15x;">
                    <el-row class="zhengShuJieShao">
                        <el-col style="width:10%;height:21px;">
                        <div class="point"></div>
                        </el-col>
                        <el-col style="width:90%;">报名要求</el-col>
                    </el-row>
                    <div v-for="yaoQiu in yaoQius" :key="yaoQiu" class="yaoQiuWengBen">
                        <span>
                            {{yaoQiu}}
                        </span>
                    </div>
                </el-row>
            </el-main>
        </el-container>
        <!-- <div style="backgroundColor:#ffffff">
                <el-row type="flex" class="imgCol" style="position:fixed;bottom:10px;width:100%">
                    <el-col  :xs="12" :sm="12" :md="12">
                        <button class="dianHuaZiXun">电话咨询</button>
                    </el-col>
                    <el-col  :xs="12" :sm="12" :md="12">
                        <button class="liJiBaoMing" @click="goToBaoMing">立即报名</button> 
                    </el-col>
                </el-row>
        </div> -->
        <div style="backgroundColor:#ffffff;position:fixed;bottom:0px;width:100%">
                <el-row type="flex" class="imgCol" style="margin-bottom:10px">       
                    <el-col :xs="12" :sm="12" :md="12" class="end">
                         <button class="dianHuaZiXun">电话咨询</button>
                    </el-col>
                    <el-col :xs="12" :sm="12" :md="12">
                        <button class="liJiBaoMing" @click="goToBaoMing">立即报名</button> 
                    </el-col>
                </el-row>
        </div>

    </div>    
</template>

<script>
// import zhengShu from '../../assets/img/peiXun/zhengShu/zhengShu.jpg'
import backIcon from '../../assets/img/mine/back.png'
export default {
    data(){
        return{
            yaoQius:[],
            backIcon:backIcon,
            normalHeight:document.documentElement.clientHeight,
            zhengShuImg:'',
            zhengShuJs:'',
            credentialId:1,
        }
    },
    mounted(){
        var credentialId=this.$route.query.credentialId;
        this.credentialId=credentialId;

        var bg = document.getElementById("background");
       // this.normalHeight=document.documentElement.clientHeight;
        console.log("height:"+this.normalHeight);
        bg.style.height = this.normalHeight+"px";
        bg.style.backgroundColor = "#FFFFFF"
        bg.style.margin = "0px";

        var head=document.getElementById("xiangQingHead");
        var headHeight=this.normalHeight/30 *4 ;
        console.log("这headHeight:"+headHeight);
        head.style.height=headHeight+"px";

        var main=document.getElementById("xiangQingMain");
        var mainHeight=this.normalHeight/30 *18 ;
        main.style.height=mainHeight+"px";

        // var foot=document.getElementById("xiangQingFoot");
        // var footHeight=this.normalHeight/30 *3 ;
        // foot.style.height=footHeight+"px";

        this.getZhengShuImg();
        this.getZhengShuJs();
        this.getZhengShuYq();
    },
    methods:{
        goToBaoMing(){
            this.$router.push({
                path:'/kaoZheng/kaoZhengBaoMing',
                query:{
                    credentialId:this.credentialId,
                    zhengShuJs:this.zhengShuJs,
                }

            })
        },
        getZhengShuYq(){
            var URL=this.IP.IP+'/credential/request';
            console.log(URL);
            this.$ajax({
                method:'get',
                url:URL,
                params: {
                        credentialId:this.credentialId,
                    },
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                    this.yaoQius=response.data.data;
                }else{
                    Toast(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
            })
        },
        getZhengShuJs(){
            var URL=this.IP.IP+'/credential/introduction';
            console.log(URL);
            this.$ajax({
                method:'get',
                url:URL,
                params: {
                        id:this.credentialId,
                    },
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                    this.zhengShuJs=response.data.data;
                }else{
                    Toast(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
            })
        },
        getZhengShuImg(){
            var URL=this.IP.IP+'/credential/picture';
            console.log(URL);
            this.$ajax({
                method:'get',
                url:URL,
                params: {
                        credentialId:this.credentialId,
                    },
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                    this.zhengShuImg=response.data.data;
                }else{
                    Toast(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
            })
        },
        back(){
            console.log("back:");
            this.$router.go(-1);
        },
    }
}
</script>

<style>
.end{
    display: flex;
    justify-content:flex-end;
}
.zhengShuImg{
    position: absolute;
    width:100%;
    height:190px;
}
.point{
    width: 10px !important;      
    height: 10px !important;      
    background-color:#53cdf5 !important;      
    border-radius: 50% !important;      
    -moz-border-radius: 50% !important;      
    -webkit-border-radius: 50% !important; 
    box-shadow: none;
    position: relative;
    top:25%;
}
.dianHuaZiXun{
    background-color: #fff;
    height: 40px;
    width: 90%;
    color: #53cdf5;
    border:#53cdf5 1px solid;
    font-size: 1.125em;
    outline: none;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    /* float: right; */
}
.liJiBaoMing{
    background-color: #53cdf5;
    height: 40px;
    width: 90%;
    color: #fff;
    font-size: 1.125em;
    outline: none;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    border-style: none;

}
.imgCol{
    display:flex;
    align-items:center;
    justify-content:center
}
.yaoQiuWengBen{
    margin-top:6px;
    font-size:14px;
}
.baoMingRow{
    margin-top: 20px;
    color: #707070;
}
.jieShaoWengBen{
    font-size: 14px;
    margin-top: 6px;
}
.jieShaoRow{
    color:#707070;
}
.backCol{
    margin-top: 20px;
    margin-left: 20px;
    position: absolute;
}
#xiangQingHead{
    width: 100%;
    /* background: url( ) no-repeat;
    background-size: 100%;
    background-attachment: fixed; */
   /* background-color:#53cdf5; */
    padding:0;
}
#xiangQingMain{
    padding:0;
    background: #FFFFFF;
}
.backSize{
    height: 26px;
}
.titleSize{
    font-size:1.125em;
    color:#ffffff
}
@media screen and (max-height: 600px){
  .backSize{
      height: 22px;
  }
  .titleSize{
      font-size: 1em;
  }
}
</style>
